27 de agosto de 2025Español

Explore los decoradores de JavaScript: una potente característica de metaprogramación para añadir metadatos e implementar patrones AOP.

Decoradores de JavaScript: Programación de Metadatos y Patrones AOP

Los decoradores de JavaScript son una característica de metaprogramación potente y expresiva que te permite modificar o mejorar el comportamiento de clases, métodos, propiedades y parámetros de una manera declarativa y reutilizable. Proporcionan una sintaxis concisa para añadir metadatos e implementar principios de Programación Orientada a Aspectos (AOP), mejorando la reutilización, legibilidad y mantenibilidad del código. Esta guía completa explorará los decoradores de JavaScript en detalle, cubriendo su sintaxis, uso y aplicaciones en varios escenarios. Si bien es una propuesta que aún está evolucionando oficialmente, los decoradores son ampliamente adoptados, especialmente en frameworks como Angular y NestJS, y su impacto en el desarrollo de JavaScript es innegable.

¿Qué son los Decoradores de JavaScript?

Los decoradores son un tipo especial de declaración que se puede adjuntar a una declaración de clase, método, accessor, propiedad o parámetro. Utilizan la forma @expresión, donde expresión debe evaluarse a una función que se llamará en tiempo de ejecución con información sobre la declaración decorada. Esencialmente, los decoradores actúan como funciones que envuelven o modifican el elemento decorado, lo que te permite añadir funcionalidad o metadatos adicionales sin modificar directamente el código original.

Piensa en los decoradores como anotaciones o marcadores que se pueden adjuntar a elementos de código. Estos marcadores luego pueden procesarse en tiempo de ejecución para realizar diversas tareas, como registro, validación, autorización o inyección de dependencias. Los decoradores promueven una estructura de código más limpia y modular al separar las preocupaciones y reducir el código repetitivo.

Beneficios de Usar Decoradores

Mejora de la Reutilización de Código: Los decoradores te permiten encapsular el comportamiento común en componentes reutilizables que se pueden aplicar a múltiples partes de tu aplicación. Esto reduce la duplicación de código y promueve la consistencia.
Legibilidad Mejorada: Al separar las preocupaciones transversales en decoradores, puedes hacer que tu lógica central sea más limpia y fácil de entender. Los decoradores proporcionan una forma declarativa de expresar comportamiento adicional, haciendo que el código sea más autodocumentado.
Mayor Mantenibilidad: Los decoradores promueven la modularidad y la separación de preocupaciones, lo que facilita la modificación o extensión de tu aplicación sin afectar otras partes de la base de código. Esto reduce el riesgo de introducir errores y simplifica el proceso de mantenimiento.
Programación Orientada a Aspectos (AOP): Los decoradores te permiten implementar principios de AOP al permitirte inyectar comportamiento en código existente sin modificar su código fuente. Esto es particularmente útil para manejar preocupaciones transversales como el registro, la seguridad y la gestión de transacciones.

Tipos de Decoradores

Los decoradores de JavaScript se pueden aplicar a diferentes tipos de declaraciones, cada una con su propósito y sintaxis específicos:

Decoradores de Clase

Los decoradores de clase se aplican al constructor de la clase y se pueden usar para modificar la definición de la clase o añadir metadatos. Un decorador de clase recibe el constructor de la clase como su único argumento.

Ejemplo: Añadiendo metadatos a una clase.

            
function Component(options: { selector: string, template: string }) {
  return function <T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
      selector = options.selector;
      template = options.template;
    }
  }
}

@Component({ selector: 'my-component', template: 'Hello' })
class MyComponent {
  constructor() {
    // ...
  }
}

console.log(new MyComponent().selector); // Salida: my-component

En este ejemplo, el decorador Component añade propiedades selector y template a la clase MyComponent, lo que te permite configurar los metadatos del componente de forma declarativa. Esto es similar a cómo se definen los componentes de Angular.

Decoradores de Método

Los decoradores de método se aplican a los métodos dentro de una clase y se pueden usar para modificar el comportamiento del método o añadir metadatos. Un decorador de método recibe tres argumentos:

El objeto de destino (ya sea el prototipo de la clase o el constructor de la clase, dependiendo de si el método es estático).
El nombre del método.
El descriptor de propiedad para el método.

Ejemplo: Registrando llamadas a métodos.

            
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Llamando a ${propertyKey} con argumentos: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`${propertyKey} devolvió: ${result}`);
    return result;
  }

  return descriptor;
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Salida: Llamando a add con argumentos: [2,3]
                     //         add devolvió: 5

En este ejemplo, el decorador Log registra la llamada al método y sus argumentos antes de ejecutar el método original y registra el valor de retorno después de la ejecución. Este es un ejemplo simple de cómo se pueden usar los decoradores para implementar funcionalidad de registro o auditoría sin modificar la lógica principal del método.

Decoradores de Propiedad

Los decoradores de propiedad se aplican a las propiedades dentro de una clase y se pueden usar para modificar el comportamiento de la propiedad o añadir metadatos. Un decorador de propiedad recibe dos argumentos:

El objeto de destino (ya sea el prototipo de la clase o el constructor de la clase, dependiendo de si la propiedad es estática).
El nombre de la propiedad.

Ejemplo: Validando valores de propiedad.

            
function Validate(target: any, propertyKey: string) {
  let value: any;

  const getter = function () {
    return value;
  };

  const setter = function (newVal: any) {
    if (typeof newVal !== 'number' || newVal < 0) {
      throw new Error(`Valor inválido para ${propertyKey}. Debe ser un número no negativo.`);
    }
    value = newVal;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class Product {
  @Validate
  price: number;

  constructor(price: number) {
    this.price = price;
  }
}

const product = new Product(10);
console.log(product.price); // Salida: 10

try {
  product.price = -5; // Lanza un error
} catch (e) {
  console.error(e.message);
}

En este ejemplo, el decorador Validate valida la propiedad price para asegurar que sea un número no negativo. Si se asigna un valor inválido, se lanza un error. Este es un ejemplo simple de cómo se pueden usar los decoradores para implementar la validación de datos.

Decoradores de Parámetro

Los decoradores de parámetro se aplican a los parámetros de un método y se pueden usar para añadir metadatos o modificar el comportamiento del parámetro. Un decorador de parámetro recibe tres argumentos:

El objeto de destino (ya sea el prototipo de la clase o el constructor de la clase, dependiendo de si el método es estático).
El nombre del método.
El índice del parámetro en la lista de parámetros del método.

Ejemplo: Inyectando dependencias.

            
import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
    return (target: any) => {
        Reflect.defineMetadata('injectable', true, target);
    };
};

const Inject = (token: string): ParameterDecorator => {
    return (target: any, propertyKey: string | symbol, parameterIndex: number) => {
        let existingParameters: string[] = Reflect.getOwnMetadata('parameters', target, propertyKey) || [];
        existingParameters[parameterIndex] = token;
        Reflect.defineMetadata('parameters', existingParameters, target, propertyKey);
    };
};

@Injectable()
class Logger {
    log(message: string) {
        console.log(`Logger: ${message}`);
    }
}

class Greeter {
    private logger: Logger;

    constructor(@Inject('Logger') logger: Logger) {
        this.logger = logger;
    }

    greet(name: string) {
        this.logger.log(`Hola, ${name}!`);
    }
}

// Contenedor simple de inyección de dependencias
class Container {
    private dependencies: Map<string, any> = new Map();

    register(token: string, dependency: any) {
        this.dependencies.set(token, dependency);
    }

    resolve<T>(target: any): T {
        const parameters: string[] = Reflect.getMetadata('parameters', target) || [];
        const resolvedDependencies = parameters.map(token => this.dependencies.get(token));
        return new target(...resolvedDependencies);
    }
}

const container = new Container();
container.register('Logger', new Logger());

const greeter = container.resolve<Greeter>(Greeter);
greeter.greet('World'); // Salida: Logger: Hola, World!

En este ejemplo, el decorador Inject se utiliza para inyectar dependencias en el constructor de la clase Greeter. El decorador asocia un token con el parámetro, que luego se puede utilizar para resolver la dependencia utilizando un contenedor de inyección de dependencias. Este ejemplo muestra una implementación básica de inyección de dependencias utilizando decoradores y la biblioteca reflect-metadata.

Ejemplos Prácticos y Casos de Uso

Los decoradores de JavaScript se pueden utilizar en una variedad de escenarios para mejorar la calidad del código y simplificar el desarrollo. Aquí hay algunos ejemplos prácticos y casos de uso:

Registro y Auditoría

Los decoradores se pueden utilizar para registrar automáticamente llamadas a métodos, argumentos y valores de retorno, proporcionando información valiosa sobre el comportamiento y el rendimiento de la aplicación. Esto puede ser particularmente útil para depurar y solucionar problemas.

            
function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        const startTime = performance.now();
        console.log(`[${new Date().toISOString()}] Llamando al método: ${propertyKey} con argumentos: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        const endTime = performance.now();
        const executionTime = endTime - startTime;
        console.log(`[${new Date().toISOString()}] El método ${propertyKey} devolvió: ${result}. Tiempo de ejecución: ${executionTime.toFixed(2)}ms`);
        return result;
    };

    return descriptor;
}

class ExampleClass {
    @LogMethod
    complexOperation(a: number, b: number): number {
        // Simula una operación que consume tiempo
        let sum = 0;
        for (let i = 0; i < 1000000; i++) {
            sum += a + b + i;
        }
        return sum;
    }
}

const example = new ExampleClass();
example.complexOperation(5, 10);

Este ejemplo extendido mide el tiempo de ejecución del método y lo registra, junto con la marca de tiempo actual, proporcionando información más detallada para el análisis de rendimiento.

Autorización y Autenticación

Los decoradores se pueden usar para aplicar políticas de seguridad comprobando los roles y permisos del usuario antes de ejecutar un método. Esto puede prevenir el acceso no autorizado a datos y funcionalidades sensibles.

            
function Authorize(role: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args: any[]) {
            const userRole = getCurrentUserRole(); // Función para recuperar el rol del usuario actual

            if (userRole !== role) {
                throw new Error(`No autorizado: El usuario no tiene el rol requerido (${role}) para acceder a este método.`);
            }

            return originalMethod.apply(this, args);
        };

        return descriptor;
    };
}

function getCurrentUserRole(): string {
    // En una aplicación real, esto recuperaría el rol del usuario del contexto de autenticación
    return 'admin'; // Ejemplo: rol codificado para demostración
}

class AdminPanel {
    @Authorize('admin')
    deleteUser(userId: number) {
        console.log(`Usuario ${userId} eliminado correctamente.`);
    }

    @Authorize('editor')
    editArticle(articleId: number) {
        console.log(`Artículo ${articleId} editado correctamente.`);
    }
}

const adminPanel = new AdminPanel();

try {
    adminPanel.deleteUser(123);
    adminPanel.editArticle(456); // Esto lanzará un error porque el rol del usuario es 'admin'
} catch (error) {
    console.error(error.message);
}

En este ejemplo extendido, el decorador Authorize verifica si el usuario actual tiene el rol especificado antes de permitir el acceso al método. La función getCurrentUserRole (que recuperaría el rol real del usuario en una aplicación real) se utiliza para determinar el rol actual del usuario. Si el usuario no tiene el rol requerido, se lanza un error, lo que impide la ejecución del método.

Caché

Los decoradores se pueden usar para almacenar en caché los resultados de operaciones costosas, mejorando el rendimiento de la aplicación y reduciendo la carga del servidor. Esto puede ser particularmente útil para datos a los que se accede con frecuencia y que no cambian a menudo.

            
function Cache(ttl: number = 60) { // ttl en segundos, por defecto 60 segundos
    const cache = new Map();

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = async function (...args: any[]) {
            const cacheKey = `${propertyKey}-${JSON.stringify(args)}`;
            const cachedData = cache.get(cacheKey);

            if (cachedData && Date.now() < cachedData.expiry) {
                console.log(`Recuperando de la caché: ${propertyKey} con argumentos: ${JSON.stringify(args)}`);
                return cachedData.data;
            }

            console.log(`Ejecutando y almacenando en caché: ${propertyKey} con argumentos: ${JSON.stringify(args)}`);
            const result = await originalMethod.apply(this, args);

            cache.set(cacheKey, {
                data: result,
                expiry: Date.now() + ttl * 1000, // Calcula el tiempo de caducidad
            });

            return result;
        };

        return descriptor;
    };
}

class DataService {
    @Cache(120) // Caché por 120 segundos
    async fetchData(id: number): Promise<string> {
        // Simula la obtención de datos de una base de datos o API
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(`Datos para el ID ${id} obtenidos de la fuente.`);
            }, 1000); // Simula un retraso de 1 segundo
        });
    }
}

const dataService = new DataService();

(async () => {
    console.log(await dataService.fetchData(1)); // Ejecuta el método
    console.log(await dataService.fetchData(1)); // Recupera de la caché
    await new Promise(resolve => setTimeout(resolve, 121000)); // Espera 121 segundos para permitir que la caché expire
    console.log(await dataService.fetchData(1)); // Ejecuta el método de nuevo después de que expire la caché
})();

Este ejemplo extendido implementa un mecanismo de caché básico utilizando un Map. El decorador Cache almacena los resultados del método decorado durante un tiempo de vida (TTL) especificado. Cuando se llama al método nuevamente con los mismos argumentos, se devuelve el resultado almacenado en caché en lugar de volver a ejecutar el método. Después de que caduca el TTL, el método se ejecuta de nuevo y el resultado se almacena en caché.

Validación

Los decoradores se pueden utilizar para validar datos antes de que se procesen, garantizando la integridad de los datos y previniendo errores. Esto puede ser particularmente útil para validar la entrada del usuario o los datos recibidos de fuentes externas.

            
function Required() {
    return function (target: any, propertyKey: string) {
        if (!target.constructor.requiredFields) {
            target.constructor.requiredFields = [];
        }
        target.constructor.requiredFields.push(propertyKey);
    };
}

function ValidateClass(target: any) {
    const originalConstructor = target;

    function construct(constructor: any, args: any[]) {
        const instance: any = new constructor(...args);
        if (constructor.requiredFields) {
            constructor.requiredFields.forEach((field: string) => {
                if (!instance[field]) {
                    throw new Error(`Campo requerido faltante: ${field}`);
                }
            });
        }
        return instance;
    }

    const newConstructor: any = function (...args: any[]) {
        return construct(originalConstructor, args);
    };

    newConstructor.prototype = originalConstructor.prototype;
    return newConstructor;
}

@ValidateClass
class User {
    @Required()
    name: string;

    @Required()
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }
}

try {
    const validUser = new User('John Doe', 'john.doe@example.com');
    console.log('Usuario válido creado:', validUser);

    const invalidUser = new User('Jane Doe', ''); // Falta el email
} catch (error) {
    console.error('Error de validación:', error.message);
}

Este ejemplo utiliza dos decoradores: Required y ValidateClass. El decorador Required marca las propiedades como requeridas. El decorador ValidateClass intercepta el constructor de la clase y verifica si todos los campos requeridos tienen valores. Si falta algún campo requerido, se lanza un error.

Inyección de Dependencias

Como se muestra en el ejemplo del decorador de parámetros, los decoradores pueden facilitar la inyección de dependencias básica, haciendo que sea más fácil administrar dependencias y desacoplar componentes. Si bien existen frameworks de inyección de dependencias más sofisticados, los decoradores pueden proporcionar una forma ligera y conveniente de manejar escenarios de inyección de dependencias simples.

Consideraciones y Mejores Prácticas

Comprender el Contexto de Ejecución: Ten en cuenta los argumentos target, propertyKey y descriptor que se pasan a la función decoradora. Estos argumentos proporcionan información valiosa sobre la declaración decorada y te permiten modificar su comportamiento en consecuencia.
Usar Decoradores con Moderación: Si bien los decoradores pueden ser potentes, el uso excesivo puede llevar a un código complejo y difícil de entender. Utiliza los decoradores juiciosamente y solo cuando proporcionen un beneficio claro en términos de reutilización de código, legibilidad o mantenibilidad.
Seguir las Convenciones de Nomenclatura: Utiliza nombres descriptivos para tus decoradores para indicar claramente su propósito. Esto hará que tu código sea más autodocumentado y fácil de entender.
Mantener la Separación de Preocupaciones: Los decoradores deben centrarse en preocupaciones transversales específicas y evitar mezclar funcionalidades no relacionadas. Esto mejorará la modularidad y mantenibilidad de tu código.
Probar Exhaustivamente tus Decoradores: Al igual que cualquier otro código, los decoradores deben probarse exhaustivamente para garantizar que funcionen correctamente y no introduzcan efectos secundarios no deseados.
Tener Cuidado con los Efectos Secundarios: Los decoradores se ejecutan en tiempo de ejecución. Evita operaciones complejas o de larga duración dentro de las funciones decoradoras, ya que esto puede afectar el rendimiento de la aplicación.
Se Recomienda TypeScript: Si bien los decoradores de JavaScript técnicamente se pueden usar en JavaScript plano con la transpilación de Babel, se usan más comúnmente con TypeScript. TypeScript proporciona una excelente seguridad de tipos y comprobación en tiempo de diseño para los decoradores.

Perspectivas Globales y Ejemplos

Los principios de reutilización de código, mantenibilidad y separación de preocupaciones, que los decoradores facilitan, son universalmente aplicables en diversos contextos de desarrollo de software a nivel mundial. Sin embargo, las implementaciones y los casos de uso específicos pueden variar según la pila tecnológica, los requisitos del proyecto y las prácticas de desarrollo predominantes en diferentes regiones.

Por ejemplo, en el desarrollo empresarial de Java, las anotaciones (similares en concepto a los decoradores) se utilizan ampliamente para la configuración y la inyección de dependencias (por ejemplo, Spring Framework). Si bien la sintaxis y los mecanismos subyacentes difieren de los decoradores de JavaScript, los principios subyacentes de metaprogramación y AOP siguen siendo los mismos. De manera similar, en Python, los decoradores son una característica de primera clase del lenguaje y se utilizan con frecuencia para tareas como el registro, la autenticación y el almacenamiento en caché.

Al trabajar en equipos internacionales o contribuir a proyectos de código abierto con una audiencia global, es esencial adherirse a los estándares de codificación y las mejores prácticas que promueven la claridad y la mantenibilidad. Utilizar decoradores de manera efectiva puede contribuir a una base de código más modular y bien estructurada, lo que facilita que los desarrolladores de diferentes orígenes colaboren y contribuyan.

Conclusión

Los decoradores de JavaScript son una característica de metaprogramación potente y versátil que puede mejorar significativamente la reutilización de código, la legibilidad y la mantenibilidad. Al proporcionar una forma declarativa de añadir metadatos e implementar principios de AOP, los decoradores te permiten encapsular el comportamiento común, separar las preocupaciones y crear aplicaciones más modulares y bien estructuradas. Si bien todavía es una propuesta en desarrollo activo, los decoradores ya han encontrado una adopción generalizada en frameworks como Angular y NestJS y están preparados para convertirse en una parte cada vez más importante del ecosistema de JavaScript. Al comprender la sintaxis, el uso y las mejores prácticas de los decoradores, puedes aprovechar su poder para construir aplicaciones más robustas, escalables y mantenibles.

A medida que el ecosistema de JavaScript continúa evolucionando, mantenerse al tanto de las nuevas características y mejores prácticas es crucial para construir software de alta calidad que satisfaga las necesidades de los usuarios en todo el mundo. Dominar los decoradores de JavaScript es una habilidad valiosa que puede ayudarte a convertirte en un desarrollador más efectivo y productivo.